<template>
  <v-layout row>
    <v-flex xs12 sm12>
      <v-card>
        <v-toolbar color="teal" dark>
          <v-toolbar-side-icon></v-toolbar-side-icon>
          <v-toolbar-title>Topics</v-toolbar-title>
          <v-spacer></v-spacer>
          <v-btn icon>
            <v-icon>more_vert</v-icon>
          </v-btn>
        </v-toolbar>
        <v-list>
          <!-- 一級導航容器 -->
          <v-list-group  v-for="item in items" v-model="item.active" :key="item.title" :prepend-icon="item.action" no-action>
            <v-list-tile slot="activator">
              <v-list-tile-content>
                <v-list-tile-title>{{ item.title }}</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
            <!-- 二級導航容器 -->
            <v-list-tile v-for="subItem in item.items" :key="subItem.title" :to="subItem.path">
              <v-list-tile-content>
                <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
              </v-list-tile-content>
              <v-list-tile-action>
                <v-icon>{{ subItem.action }}</v-icon>
              </v-list-tile-action>
            </v-list-tile>
            <!-- /二級導航容器 -->
          </v-list-group>
          <!-- /一級導航容器 -->
        </v-list>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
export default {
  data () {
    return {
      path: '/first',
      items: [
        {
          action: 'local_activity',
          title: '菜單1',
          items: [
            { title: '子菜單1', path: '/first' }
          ]
        },
        {
          action: 'restaurant',
          title: '功能',
          active: true,
          items: [
            { title: '表格' },
            { title: '按鈕' },
            { title: '模態框' }
          ]
        },
        {
          action: 'school',
          title: '控件',
          items: [
            { title: '日期控件' }
          ]
        },
        {
          action: 'directions_run',
          title: '表單',
          items: [
            { title: '下拉框' }
          ]
        },
        {
          action: 'healing',
          title: '表單2',
          items: [
            { title: '輸入框' }
          ]
        },
        {
          action: 'content_cut',
          title: '表單3',
          items: [
            { title: '表單驗證' }
          ]
        },
        {
          action: 'local_offer',
          title: '空',
          items: [
            { title: 'List Item' }
          ]
        }
      ]
    }
  }
}
</script>
